@import "base.scss";
@import "mixin.scss";

.calendar-box {
    display: none;
    position: absolute;
    top: 3 * $fontSize10;
    left: 0;
    width: 21 * $fontSize10 + 2;
    height: 24 * $fontSize10 + 3;
    .calendar-title-box {
        position: absolute;
        top: 0;
        left: 0;
        width: 19 * $fontSize10;
        height: 3 * $fontSize10;
        line-height: 3 * $fontSize10;
        text-align: center;
        padding:0 $fontSize10;
        @include border(1px,solid,$colore5);
        background: $colorfff;
        z-index: 5;
    }
    .calendar-body-box {
        position: absolute;
        top: 2 * $fontSize16;
        left: 0;
        width: 19 * $fontSize10;
        background: $colorfff;
        padding:0 $fontSize10;
        @include border(1px,solid,$colore5);
        border-top: 0;
        z-index: 5;
    }
    .prev-month {
        position: absolute;
        top: $fontSize12;
        left: $fontSize14 + 1;
        display: inline-block;
        width: 0;
        height: 0;
        border-left: 0;
        border-top: $fontSize12 / 2 solid transparent;
        border-right: $fontSize16 / 2 solid #999;
        border-bottom: $fontSize12 / 2 solid transparent;
        cursor: pointer;
        &:hover {
            border-right-color: $theme;
        }
    }
    .next-month {
        position: absolute;
        top: $fontSize12;
        right: $fontSize14 + 1;
        display: inline-block;
        width:0;
        height: 0;
        border-right: 0;
        border-top: $fontSize12 / 2 solid transparent;
        border-left: $fontSize16 / 2 solid #999;
        border-bottom: $fontSize12 / 2 solid transparent;
        cursor: pointer;
        &:hover {
            border-left-color: $theme;
        }
    }
    .calendar-table {
        width: 100%;
        border-collapse: collapse;
        text-align: center;
        tr {
            height: 3 * $fontSize10;
            line-height: 3 * $fontSize10;
        }
    }
    .currentDay {
        color: $theme;
        font-weight: 700;
        background: #f3f3f3;
    }
    .currentMonth {
        color: $color666;
        cursor: not-allowed;
        &.canChoose {
            color: #157bb9;
            cursor: pointer;
            &:hover {
                background: #f3f3f3;
            }
        }
    }
    .otherMonth {
        color: #d4ecf7;
    }
}
